<template>
  <el-card class="form-container" shadow="never">
    <el-form
      :model="res"
      ref="contentFrom"
      label-width="150px">
      <el-form-item label="属性名称：" required>
        <el-input v-model="res.prptyName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="展示名称：" required>
        <el-input v-model="res.prptyNameShow" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="属性类型：">
        <!--        <el-input v-model="content.prptyType" placeholder="请输入"></el-input>-->
        <el-select v-model="res.prptyType" placeholder="请选择" @change="changePrptyType">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="属性值：">
        <br>
        <el-card shadow="never" class="cardValue">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content bg-purple"><p>排序</p></div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple"><p>属性值名称</p></div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <div v-for="(item,index) in prptyValList" :key="index" style="height:40px;margin-bottom:20px;clear: both">
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <el-input placeholder="排序" v-model="item.prptySeq"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <el-input placeholder="属性值" v-model="item.prptyValue"></el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <el-button class="button-del" @click="delDays(index)">移除</el-button>
              </el-col>
            </div>
          </el-row>
          <br>
          <el-row :gutter="20">
            <el-col :span="12"><div class="grid-content bg-purple"><el-button @click="addDays()">+ 新增属性值</el-button></div></el-col>
          </el-row>
        </el-card>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
        <el-button @click="back">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>

import { prptySave } from '@/api/goodsMs'

const defaultContent = {
  prptyNameShow: '',
  'prptyName': '',
  'prptyType': ''
}
export default {
  // name: 'MenuDetail',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      options: [{
        value: '1',
        label: '销售属性'
      }, {
        value: '2',
        label: '自然属性'
      }],
      value: '销售属性',
      addUms: false,
      prptyValList: [
        {
          prptySeq: '',
          prptyValue: ''
        }
      ],
      // source: '销售属性',
      parentId: 0,
      res: Object.assign({}, defaultContent),
      rules: {
        subtitle: [
          { required: true, message: '请输入属性值', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        source: [
          { required: true, message: '请输入属性', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
  },
  methods: {
    changePrptyType (value) {
      this.res.prptyType = value
    },
    delDays (index) {
      this.prptyValList.splice(index, 1)
    },
    addDays () {
      this.prptyValList.push({
        prptySeq: '',
        prptyValue: ''
      })
    },
    onSubmit () {
      this.$refs['contentFrom'].validate((valid) => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.res.prptyValList = this.prptyValList
            prptySave({ ...this.res }).then(response => {
              const { code, message } = response
              this.$message({
                message: code !== 200 ? message : '提交成功',
                type: code !== 200 ? 'error' : 'success',
                duration: 1000
              })
              if (code === 200) {
                this.$router.back()
              }
            })
          })
        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration: 1000
          })
          return false
        }
      })
    },
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
  .form-container{
    position: relative;
    z-index: 0;
    width: 800px;
  }
  .cardValue{

  }
  /*.button-del{*/
  /*  margin-top: 68px;*/
  /*}*/
</style>
